'use strict'

// 题目要求，完成所有显示在按钮上的要求，并为当前按钮绑定点击事件的函数，点击就完成指定元素样式（背景颜色等）或图片的更改，如下两个示例

// jQuery用法，表示所有标签加载完成后执行的动作
$(function () {
  // 示例，为id为one的元素的点击事件绑定函数：
  //改变id为one的元素
  $('.baseOne').on('click', function () {
    $('#one').css('background', '#6699CC')
  })

  //改变class为mini的元素
  $('.baseMini').on('click', function () {
    $('.mini').attr({ src: './imgs/haozi.jpg', alt: '逗比的脸萌' })
  })

  //改变所有的div元素
  $('.baseDiv').on('click', function () {
    $('div').css('background', '#9999CC')
  })

  //改变所有span和id为two的元素
  $('.baseSt').on('click', function(){
    $('span,#two').css('background','red')
  })

  //取div中的所有span元素
  $('.levelSt').on('click',function(){
    $('div span').css('background','red');
  })

  //取div下元素名为span的子元素
  $('.levelSpan').on('click',function(){
    $('div>span').css('background','yellow')
  })

  //取id为one的下一个div元素
  $('.levelOne').on('click',function(){
    $('#one').next().css('background','red')
  })


  // h2
  //选取含有属性title的img元素
  $('.filteTit').on('click',function(){
    $('img[title]').attr({src :'./imgs/haozi.jpg', alt:"逗比的脸萌"})
    console.log($('img[title]'));
  })

  //选取含有属性title值为test的img元素
  $('.filteTest').on('click',function(){
    $('img[title = test]').attr({src:'./imgs/niuniu.jpg',  alt:'1'})
  })

  //选取含有属性title值不为test的img元素
  $('.filteImg').on('click',function(){
    $('img[title != test]').attr({src:'./imgs/haozi.jpg', alt:'2'})
  })

  //选取含有属性title值以te开头的img元素
  $('.filteTe').on('click',function(){
    $('img[title ^= te]').attr({src:'./imgs/niuniu.jpg', alt:'1'})
  })

  //选取含有属性title值以st结束的img元素
  $('.filteSt').on('click',function(){
    $('img[title $= st]').attr({src:'./imgs/niuniu.jpg', alt:'1'})
  })

  //选取含有属性title值含有的img元素
  $('.filteEs').on('clock',function(){
    $('img[title != null]').attr({src:'./imgs/haozi.jpg', alt:'1'})
  })
})